<template>
	<view class="couponBox" :class="type? 'g': ''">
		<view class="top ">
			<view class="left">
				<view class="title">
					<text class="a">￥</text>
					<text class="b">{{pirce ?pirce:'未知'}}</text>
					<text class="a" style="padding-left:10rpx;">{{title ?title:'注册有礼'}}</text>
				</view>
				<view class="day" v-if="timeOpen && timeEnd">有效期:{{timeOpen}} - {{timeEnd}}</view>
			</view>
			<view class="right" @click="Receive()">{{typeTitle ?typeTitle:'立即使用'}}</view>
		</view>
		<view class="bottom">
			{{subTitle?subTitle:'通用优惠券'}}
		</view>
	</view>
</template>

<script>
	export default {
		name: 'lxCouponListItem',
		data() {
			return {

			}
		},
		props: {
			type: '',
			pirce: '',
			title: '',
			timeOpen: '',
			timeEnd: '',
			typeTitle: '',
			subTitle: '',
		},
		methods: {
			Receive() {
				uni.$emit('click', this.item)
				// 点击事件
			}

		}
	}
</script>

<style lang="scss" scoped>
	.g {
		-webkit-filter: grayscale(1);
		/* Chrome, Safari, Opera */
		filter: grayscale(1);
		background-image: url('@/static/image_bg_youhui_no.png') !important;

		.top {
			.left {

				.title {
					color: #6b6b6b !important;
				}

				.title{
					text:nth-child(1){
						color: #6b6b6b !important;
					}
				}

				.title{
					text:nth-child(2){
						color: #6b6b6b !important;
					}
				}
				.a{
					color: #6b6b6b !important;
					font-size: 28rpx;
				}
				.day {
					color: #6b6b6b !important;

				}

			}

			.right {
				display: none;
			}
		}

	}

	.couponBox {
		height: 240rpx;
		background-image: url('@/static/image_bg_youhui_yes.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-top: 20rpx;

		.top {
			padding: 20rpx 20rpx 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				.title {
					font-size: 36rpx;
					color: #ffffff;
				}

				.title{
					text{
						color: #FFF600;
						font-size: 36rpx;
					}
					.a{
						color: #ffffff;
						font-size: 28rpx;
					}
					.b{
						font-size: 60rpx;
					}
				}
				.day {
					color: #ffffff;
					font-size: 26rpx;
				}
			}

			.right {
				color: #FFF600;
				padding: 12rpx 30rpx;
				border: 1rpx solid #FFF600;
				border-radius: 50rpx;
				font-size: 26rpx;
			}
		}

		.bottom {
			margin-top: 20rpx;
			padding: 20rpx;
			color: #FF6411;
			font-size: 30rpx;
		}
	}
</style>